<template>
    <div class="dashboard-container">
        <div class="dashboard-header">
            <h1 class="dashboard-title">自动生产线看板</h1>
            <div class="dashboard-time">{{ currentDateTime }}</div>
        </div>

        <!-- 加载状态遮罩 -->
        <div class="loading-overlay" v-if="loading">
            <div class="loading-spinner"></div>
            <div class="loading-text">数据加载中...</div>
        </div>

        <div class="dashboard-content">
            <!-- 搜索框 -->
            <div class="search-area">
                <div class="search-input">
                    <input type="text" placeholder="搜索..." />
                </div>
                <div class="add-plan-btn" @click="fetchDashboardData">刷新数据</div>
            </div>

            <!-- 顶部区域 -->
            <div class="top-area">
                <div class="dashboard-card weekly-stats">
                    <div class="card-title">一周不良品统计</div>
                    <div class="chart-container">
                        <div ref="weeklyDefectChart" class="chart"></div>
                    </div>
                </div>

                <div class="dashboard-card total-progress">
                    <div class="card-title">订单总体进度</div>
                    <div class="progress-info">
                        <div>总计计划 {{ totalPlan }}</div>
                        <div>已经生产 {{ produced }}</div>
                        <div>不良品 {{ defects }}</div>
                        <div>完成率 {{ completionRate }}%</div>
                    </div>
                    <div class="chart-container">
                        <div ref="totalProgressChart" class="chart"></div>
                    </div>
                </div>

                <div class="dashboard-card daily-progress">
                    <div class="card-title">订单今日进度</div>
                    <div class="progress-info">
                        <div>今日计划 {{ dailyPlan }}</div>
                        <div>已经生产 {{ dailyProduced }}</div>
                        <div>不良品 {{ dailyDefects }}</div>
                        <div>良品率 {{ dailyQualityRate }}%</div>
                    </div>
                    <div class="chart-container">
                        <div ref="dailyProgressChart" class="chart"></div>
                    </div>
                </div>

                <div class="dashboard-card current-shift">
                    <div class="card-title">当前班组</div>
                    <div class="shift-info">
                        <div><span class="info-label">名称:</span> <span class="info-value">{{ currentShiftName }}</span></div>
                        <div><span class="info-label">人数:</span> <span class="info-value">{{ currentShiftPeople }}</span></div>
                        <div><span class="info-label">负责人:</span> <span class="info-value">{{ currentShiftLeader }}</span></div>
                        <div><span class="info-label">电话:</span> <span class="info-value">{{ currentShiftPhone }}</span></div>
                    </div>
                </div>

                <div class="dashboard-card abnormal-list">
                    <div class="card-title">异常列表</div>
                    <div class="abnormal-list-content">
                        <!-- 异常列表内容 -->
                    </div>
                </div>
            </div>

            <!-- 中间区域 -->
            <div class="middle-area">
                <div class="dashboard-card key-indicators">
                    <div class="card-title">关键工序</div>
                    <div class="radar-chart-container">
                        <div ref="keyProcessChart" class="chart"></div>
                    </div>
                </div>

                <div class="dashboard-card daily-evaluation">
                    <div class="card-title">当日生产绩效估</div>
                    <div class="evaluation-content">
                        <div class="evaluation-item">
                            <span class="status-dot green"></span>
                            <span>实际完成率 {{ actualCompletionRate }}%</span>
                        </div>
                        <div class="evaluation-item">
                            <span class="status-dot blue"></span>
                            <span>期望完成率 {{ expectedCompletionRate }}%</span>
                        </div>
                        <div class="evaluation-item">
                            <span class="status-dot red"></span>
                            <span>零件转时 {{ partsTurnTime }}</span>
                        </div>
                        <div class="evaluation-item">
                            <span class="status-dot yellow"></span>
                            <span>标准转时 {{ standardTurnTime }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部区域 -->
            <div class="bottom-area">
                <div class="dashboard-card weekly-production">
                    <div class="card-title">一周产量均衡度</div>
                    <div class="chart-container">
                        <div ref="weeklyProductionChart" class="chart"></div>
                    </div>
                </div>

                <div class="dashboard-card production-plan">
                    <div class="card-title">近期生产计划列表</div>
                    <div class="plan-table">
                        <div class="scroll-container" ref="scrollContainer">
                            <el-table 
                                :data="visiblePlans" 
                                style="width: 100%" 
                                :border="true"
                                :show-header="true"
                                :row-style="getRowStyle"
                            >
                                <el-table-column 
                                    prop="orderId" 
                                    label="订单号" 
                                    align="center"
                                    width="120"
                                ></el-table-column>
                                <el-table-column 
                                    prop="quantity" 
                                    label="计划数量" 
                                    align="center"
                                    width="100"
                                ></el-table-column>
                                <el-table-column 
                                    prop="startTime" 
                                    label="计划开始时间" 
                                    align="center"
                                    width="160"
                                ></el-table-column>
                                <el-table-column 
                                    prop="endTime" 
                                    label="计划结束时间" 
                                    align="center"
                                    width="160"
                                ></el-table-column>
                                <el-table-column 
                                    prop="status" 
                                    label="订单状态" 
                                    align="center"
                                    width="100"
                                >
                                    <template #default="scope">
                                        <span :class="['status-tag', 'status-' + scope.row.statusClass]">
                                            {{ scope.row.status }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column 
                                    prop="completionRate" 
                                    label="完成率" 
                                    align="center"
                                    width="80"
                                >
                                    <template #default="scope">
                                        {{ scope.row.completionRate }}%
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 复制一份表格用于无缝滚动 -->
                            <el-table 
                                :data="visiblePlans" 
                                style="width: 100%" 
                                :border="true"
                                :show-header="false"
                                :row-style="getRowStyle"
                            >
                                <el-table-column 
                                    prop="orderId" 
                                    label="订单号" 
                                    align="center"
                                    width="120"
                                ></el-table-column>
                                <el-table-column 
                                    prop="quantity" 
                                    label="计划数量" 
                                    align="center"
                                    width="100"
                                ></el-table-column>
                                <el-table-column 
                                    prop="startTime" 
                                    label="计划开始时间" 
                                    align="center"
                                    width="160"
                                ></el-table-column>
                                <el-table-column 
                                    prop="endTime" 
                                    label="计划结束时间" 
                                    align="center"
                                    width="160"
                                ></el-table-column>
                                <el-table-column 
                                    prop="status" 
                                    label="订单状态" 
                                    align="center"
                                    width="100"
                                >
                                    <template #default="scope">
                                        <span :class="['status-tag', 'status-' + scope.row.statusClass]">
                                            {{ scope.row.status }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column 
                                    prop="completionRate" 
                                    label="完成率" 
                                    align="center"
                                    width="80"
                                >
                                    <template #default="scope">
                                        {{ scope.row.completionRate }}%
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <div class="dashboard-card recent-products">
                    <div class="card-title">最近生产产品列表</div>
                    <div class="products-table">
                        <el-table 
                            :data="recentProducts" 
                            style="width: 100%" 
                            :border="true"
                        >
                            <el-table-column 
                                prop="serialNumber" 
                                label="产品序列号" 
                                align="center"
                            ></el-table-column>
                            <el-table-column 
                                prop="quality" 
                                label="产品品质" 
                                align="center"
                            >
                                <template #default="scope">
                                    <span :class="['quality-tag', 'quality-' + scope.row.qualityClass]">
                                        {{ scope.row.quality }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column 
                                prop="productionTime" 
                                label="生产时间" 
                                align="center"
                            ></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { LineChart, PieChart, RadarChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import axios from 'axios'; // 引入axios用于发送请求

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    LineChart,
    PieChart,
    RadarChart,
    CanvasRenderer
]);

export default {
    name: 'IntelligentWorkshopmanagementsystem',
    data() {
        return {
            // 图表实例引用
            chartInstances: [],

            // 当前时间
            currentDateTime: '',
            timer: null,
            dataRefreshTimer: null, // 数据刷新定时器

            // 订单总体进度数据
            totalPlan: '0',
            produced: '0',
            defects: '0',
            completionRate: '0',

            // 订单今日进度数据
            dailyPlan: '0',
            dailyProduced: '0',
            dailyDefects: '0',
            dailyQualityRate: '0',

            // 当前班组信息
            currentShiftName: '',
            currentShiftPeople: '0',
            currentShiftLeader: '',
            currentShiftPhone: '',

            // 当日生产绩效估数据
            actualCompletionRate: '0',
            expectedCompletionRate: '0',
            partsTurnTime: '0',
            standardTurnTime: '0',

            // 近期生产计划列表
            productionPlans: [],

            // 最近生产产品列表
            recentProducts: [],

            // 一周不良品统计
            weeklyDefects: [],

            // 一周产量均衡度
            weeklyProduction: [],

            // 关键工序数据
            keyProcessData: [],

            // 滚动相关
            scrollTimer: null,
            scrollPosition: 0,
            visiblePlans: [],

            // 加载状态
            loading: false
        };
    },
    mounted() {
        // 初始更新时间
        this.updateDateTime();

        // 每秒更新时间
        this.timer = setInterval(this.updateDateTime, 1000);

        // 获取初始数据
        this.fetchDashboardData();

        // 设置数据定时刷新 (每30秒刷新一次)
        this.dataRefreshTimer = setInterval(this.fetchDashboardData, 30000);

        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
        // 清理定时器
        if (this.timer) {
            clearInterval(this.timer);
        }

        // 清理数据刷新定时器
        if (this.dataRefreshTimer) {
            clearInterval(this.dataRefreshTimer);
        }

        // 清理滚动动画
        if (this.scrollTimer) {
            clearInterval(this.scrollTimer);
        }

        // 移除事件监听
        window.removeEventListener('resize', this.handleResize);

        // 销毁图表实例
        this.chartInstances.forEach(chart => {
            chart.dispose();
        });
    },
    methods: {
        // 获取仪表盘数据
        async fetchDashboardData() {
            try {
                this.loading = true;
                
                // 从API获取数据
                const response = await axios.get('http://localhost:9991/api/VisualIntelligentWorkshop/GetDashboardData');
                
                // 解析接口返回数据
                const data = response.data;
                
                // 更新订单总体进度数据
                if (data.orderOverall) {
                    this.totalPlan = data.orderOverall.planQuantity || '0';
                    this.produced = data.orderOverall.producedQuantity || '0';
                    this.defects = data.orderOverall.defectQuantity || '0';
                    this.completionRate = data.orderOverall.progressRate || '0';
                }
                
                // 更新订单今日进度数据
                if (data.orderToday) {
                    this.dailyPlan = data.orderToday.planQuantity || '0';
                    this.dailyProduced = data.orderToday.producedQuantity || '0';
                    this.dailyDefects = data.orderToday.defectQuantity || '0';
                    
                    // 计算良品率 = (生产数 - 不良品数) / 生产数 * 100
                    const produced = parseInt(data.orderToday.producedQuantity) || 0;
                    const defects = parseInt(data.orderToday.defectQuantity) || 0;
                    if (produced > 0) {
                        this.dailyQualityRate = (((produced - defects) / produced) * 100).toFixed(2);
                    } else {
                        this.dailyQualityRate = '0';
                    }
                }
                
                // 更新当前班组信息
                if (data.currentTeam) {
                    this.currentShiftName = data.currentTeam.teamName || '';
                    this.currentShiftLeader = data.currentTeam.leader || '';
                    this.currentShiftPhone = data.currentTeam.phone || '';
                    this.currentShiftPeople = data.currentTeam.memberCount || '0';
                }
                
                // 更新一周不良品统计
                if (data.weeklyDefects && Array.isArray(data.weeklyDefects)) {
                    this.weeklyDefects = data.weeklyDefects;
                }
                
                // 更新一周产量均衡度
                if (data.weeklyProduction && Array.isArray(data.weeklyProduction)) {
                    this.weeklyProduction = data.weeklyProduction;
                }
                
                // 更新关键工序数据
                if (data.keyProcesses && Array.isArray(data.keyProcesses)) {
                    this.keyProcessData = data.keyProcesses;
                }
                
                // 更新近期生产计划
                if (data.recentPlans && Array.isArray(data.recentPlans)) {
                    this.productionPlans = data.recentPlans.map(plan => {
                        // 根据状态设置样式类
                        let statusClass = 'created';
                        if (plan.status === '进行中') {
                            statusClass = 'inprogress';
                        } else if (plan.status === '订单结束') {
                            statusClass = 'finished';
                        }
                        
                        return {
                            ...plan,
                            statusClass
                        };
                    });
                    
                    // 初始化滚动表格
                    this.initScrollingTable();
                }
                
                // 更新最近生产产品
                if (data.recentProducts && Array.isArray(data.recentProducts)) {
                    this.recentProducts = data.recentProducts.map(product => {
                        // 设置品质样式类
                        const qualityClass = product.quality === '合格' ? 'good' : 'bad';
                        
                        return {
                            ...product,
                            qualityClass
                        };
                    });
                }
                
                // 初始化或更新图表
                this.$nextTick(() => {
                    this.initCharts();
                });
                
            } catch (error) {
                console.error('获取仪表盘数据失败:', error);
                // 出错时清空数据
                this.clearData();
            } finally {
                this.loading = false;
            }
        },

        // 清空数据
        clearData() {
            this.totalPlan = '0';
            this.produced = '0';
            this.defects = '0';
            this.completionRate = '0';
            
            this.dailyPlan = '0';
            this.dailyProduced = '0';
            this.dailyDefects = '0';
            this.dailyQualityRate = '0';
            
            this.currentShiftName = '';
            this.currentShiftLeader = '';
            this.currentShiftPhone = '';
            this.currentShiftPeople = '0';
            
            this.weeklyDefects = [];
            this.weeklyProduction = [];
            this.keyProcessData = [];
            this.productionPlans = [];
            this.recentProducts = [];
            
            // 清空表格数据
            this.visiblePlans = [];
        },

        // 更新时间
        updateDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();

            this.currentDateTime = `${year}年${month}月${day}日-${hour}时${minute}分${second}秒`;
        },

        // 处理窗口大小变化
        handleResize() {
            this.chartInstances.forEach(chart => {
                chart.resize();
            });
        },

        // 初始化图表
        initCharts() {
            // 清空之前的图表实例
            this.chartInstances.forEach(chart => {
                chart.dispose();
            });
            this.chartInstances = [];
            
            this.initWeeklyDefectChart();
            this.initTotalProgressChart();
            this.initDailyProgressChart();
            this.initKeyProcessChart();
            this.initWeeklyProductionChart();
        },

        // 初始化周不良品统计图表
        initWeeklyDefectChart() {
            const chartDom = this.$refs.weeklyDefectChart;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            this.chartInstances.push(chart);

            // 准备数据
            const xAxisData = [];
            const seriesData = [];
            
            // 使用接口数据或默认数据
            if (this.weeklyDefects && this.weeklyDefects.length > 0) {
                this.weeklyDefects.forEach((item, index) => {
                    xAxisData.push(String(index + 1));
                    seriesData.push(item);
                });
            } else {
                // 默认数据
                xAxisData.push('1', '2', '3', '4', '5', '6');
                seriesData.push(4, 3, 2.5, 2, 4.5, 1);
            }

            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return `${params[0].name}日：<br/>不良品${params[0].value}`;
                    },
                    backgroundColor: 'rgba(8, 28, 59, 0.8)',
                    borderColor: '#00a0e9',
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px;'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: '#00a0e9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: Math.max(...seriesData) + 1,
                    interval: 1,
                    axisLine: {
                        lineStyle: {
                            color: '#00a0e9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 160, 233, 0.1)',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '不良品数量',
                        type: 'line',
                        data: seriesData,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 160, 233, 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 160, 233, 0.05)'
                                    }
                                ]
                            }
                        },
                        lineStyle: {
                            width: 3,
                            color: '#00a0e9',
                            shadowColor: 'rgba(0, 160, 233, 0.5)',
                            shadowBlur: 10
                        },
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            color: '#00a0e9',
                            borderColor: '#fff',
                            borderWidth: 2,
                            shadowColor: 'rgba(0, 160, 233, 0.5)',
                            shadowBlur: 10
                        },
                        smooth: true
                    }
                ]
            };

            chart.setOption(option);
        },

        // 初始化订单总体进度图表
        initTotalProgressChart() {
            const chartDom = this.$refs.totalProgressChart;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            this.chartInstances.push(chart);

            // 计算完成率和未完成率
            const completionRate = parseFloat(this.completionRate) || 0;
            const remainingRate = 100 - completionRate;

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%',
                    backgroundColor: 'rgba(8, 28, 59, 0.8)',
                    borderColor: '#00a0e9',
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px;'
                },
                series: [
                    {
                        name: '订单进度',
                        type: 'pie',
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: 'rgba(8, 28, 59, 0.8)',
                            borderWidth: 2
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: false
                            },
                            itemStyle: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: completionRate,
                                name: '已生产',
                                itemStyle: { 
                                    color: '#00a0e9'
                                },
                                label: {
                                    show: true,
                                    position: 'center',
                                    formatter: '{c}%',
                                    fontSize: 24,
                                    fontWeight: 'bold',
                                    color: '#00a0e9'
                                }
                            },
                            { 
                                value: remainingRate, 
                                name: '未生产', 
                                itemStyle: { 
                                    color: 'rgba(255, 255, 255, 0.1)'
                                } 
                            }
                        ]
                    }
                ]
            };

            chart.setOption(option);
        },

        // 初始化订单今日进度图表
        initDailyProgressChart() {
            const chartDom = this.$refs.dailyProgressChart;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            this.chartInstances.push(chart);

            // 计算良品率和不良品率
            const qualityRate = parseFloat(this.dailyQualityRate) || 0;
            const defectRate = 100 - qualityRate;

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%',
                    backgroundColor: 'rgba(8, 28, 59, 0.8)',
                    borderColor: '#00a0e9',
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px;'
                },
                series: [
                    {
                        name: '今日进度',
                        type: 'pie',
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: 'rgba(8, 28, 59, 0.8)',
                            borderWidth: 2
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: false
                            },
                            itemStyle: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: qualityRate,
                                name: '良品',
                                itemStyle: { 
                                    color: '#00ff00'
                                },
                                label: {
                                    show: true,
                                    position: 'center',
                                    formatter: '{c}%',
                                    fontSize: 24,
                                    fontWeight: 'bold',
                                    color: '#00ff00'
                                }
                            },
                            { 
                                value: defectRate, 
                                name: '不良品', 
                                itemStyle: { 
                                    color: 'rgba(255, 255, 255, 0.1)'
                                } 
                            }
                        ]
                    }
                ]
            };

            chart.setOption(option);
        },

        // 初始化关键工序雷达图
        initKeyProcessChart() {
            const chartDom = this.$refs.keyProcessChart;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            this.chartInstances.push(chart);

            // 准备雷达图数据
            let indicators = [];
            let seriesData = [];
            
            // 使用接口数据或默认数据
            if (this.keyProcessData && this.keyProcessData.length > 0) {
                // 从接口数据构建雷达图指标和数据
                indicators = this.keyProcessData.map(item => {
                    return { name: item.name || '指标', max: 100 };
                });
                
                seriesData = this.keyProcessData.map(item => item.value || 0);
            } else {
                // 默认数据
                indicators = [
                    { name: '侧压', max: 100 },
                    { name: '点数', max: 100 },
                    { name: '阻燃', max: 100 },
                    { name: '绝缘', max: 100 },
                    { name: '侧压管子', max: 100 }
                ];
                seriesData = [80, 70, 60, 85, 75];
            }

            const option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(8, 28, 59, 0.8)',
                    borderColor: '#00a0e9',
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px;'
                },
                radar: {
                    indicator: indicators,
                    shape: 'polygon',
                    splitNumber: 4,
                    axisName: {
                        color: 'rgba(255, 255, 255, 0.8)',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 160, 233, 0.2)',
                            width: 1
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(0, 160, 233, 0.05)', 'rgba(0, 160, 233, 0.1)']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 160, 233, 0.3)',
                            width: 1
                        }
                    }
                },
                series: [
                    {
                        name: '关键指标',
                        type: 'radar',
                        data: [
                            {
                                value: seriesData,
                                name: '关键指标',
                                areaStyle: {
                                    color: 'rgba(0, 160, 233, 0.3)'
                                },
                                lineStyle: {
                                    width: 2,
                                    color: '#00a0e9'
                                },
                                itemStyle: {
                                    color: '#00a0e9',
                                    borderColor: '#fff',
                                    borderWidth: 2
                                }
                            }
                        ]
                    }
                ]
            };

            chart.setOption(option);
        },

        // 初始化一周产量均衡度图表
        initWeeklyProductionChart() {
            const chartDom = this.$refs.weeklyProductionChart;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            this.chartInstances.push(chart);

            // 准备数据
            const xAxisData = [];
            const seriesData = [];
            
            // 使用接口数据或默认数据
            if (this.weeklyProduction && this.weeklyProduction.length > 0) {
                this.weeklyProduction.forEach((item, index) => {
                    xAxisData.push(String(index + 1));
                    seriesData.push(item);
                });
            } else {
                // 默认数据
                xAxisData.push('1', '2', '3', '4', '5', '6');
                seriesData.push(1000, 200, 400, 400, 600, 100);
            }

            // 计算y轴最大值
            const maxValue = Math.max(...seriesData) * 1.2;
            const interval = Math.ceil(maxValue / 5);

            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(8, 28, 59, 0.8)',
                    borderColor: '#00a0e9',
                    textStyle: {
                        color: '#fff'
                    },
                    extraCssText: 'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px;'
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: '#00a0e9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: maxValue,
                    interval: interval,
                    axisLine: {
                        lineStyle: {
                            color: '#00a0e9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 160, 233, 0.1)',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '产量',
                        type: 'line',
                        data: seriesData,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0, 255, 0, 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 255, 0, 0.05)'
                                    }
                                ]
                            }
                        },
                        lineStyle: {
                            width: 3,
                            color: '#00ff00',
                            shadowColor: 'rgba(0, 255, 0, 0.5)',
                            shadowBlur: 10
                        },
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            color: '#00ff00',
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        smooth: true
                    }
                ]
            };

            chart.setOption(option);
        },

        // 初始化滚动表格
        initScrollingTable() {
            // 清除之前的定时器
            if (this.scrollTimer) {
                clearInterval(this.scrollTimer);
            }
            
            this.$nextTick(() => {
                // 启动自动滚动
                this.startAutoScroll();
            });
        },

        // 启动自动滚动
        startAutoScroll() {
            // 如果没有足够的数据，不启动滚动
            if (!this.productionPlans || this.productionPlans.length <= 5) {
                this.visiblePlans = [...this.productionPlans];
                return;
            }

            // 设置定时器进行滚动
            this.scrollTimer = setInterval(() => {
                // 将第一条数据移到末尾，实现循环滚动效果
                const firstItem = this.productionPlans[0];
                this.productionPlans = [...this.productionPlans.slice(1), firstItem];
                // 更新可见数据
                this.visiblePlans = this.productionPlans.slice(0, 5);
            }, 3000); // 每3秒滚动一次
            
            // 初始化可见数据
            this.visiblePlans = this.productionPlans.slice(0, 5);
        },

        // 获取行样式
        getRowStyle() {
            return {};
        }
    }
};
</script>

<style scoped>
.dashboard-container {
    width: 100%;
    height: 100vh;
    background: #061325;
    color: white;
    padding: 20px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

/* 加载状态遮罩 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 19, 37, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 160, 233, 0.3);
    border-radius: 50%;
    border-top-color: #00a0e9;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 15px;
}

.loading-text {
    color: #00a0e9;
    font-size: 18px;
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.dashboard-header {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
    padding: 10px 0;
}

.dashboard-title {
    font-size: 32px;
    text-align: center;
    margin: 0;
    color: #00a0e9;
    position: relative;
    font-weight: bold;
    letter-spacing: 2px;
}

.dashboard-title::before,
.dashboard-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00a0e9, transparent);
}

.dashboard-title::before {
    left: -180px;
}

.dashboard-title::after {
    right: -180px;
}

.dashboard-time {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: white;
    background: rgba(0, 160, 233, 0.1);
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid rgba(0, 160, 233, 0.3);
}

.dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100% - 80px);
}

.search-area {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.search-input {
    flex: 1;
}

.search-input input {
    width: 250px;
    padding: 10px 15px;
    background-color: rgba(8, 28, 59, 0.7);
    border: 1px solid #00a0e9;
    color: white;
    border-radius: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.search-input input:focus {
    border-color: #00a0e9;
    box-shadow: 0 0 10px rgba(0, 160, 233, 0.3);
}

.add-plan-btn {
    background: #00a0e9;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.add-plan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.top-area {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.7fr 0.7fr;
    gap: 15px;
    height: 35%;
}

.middle-area {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: 15px;
    height: 25%;
}

.bottom-area {
    display: grid;
    grid-template-columns: 0.5fr 2fr 1fr;
    gap: 15px;
    height: 40%;
}

.dashboard-card {
    background-color: #081C3B;
    border-radius: 5px;
    border: 1px solid #00a0e9;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-title {
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #00a0e9;
    padding-bottom: 10px;
    color: #fff;
    font-weight: 500;
}

.chart-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart {
    width: 100%;
    height: 100%;
}

.progress-info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0 10px;
}

.progress-info div {
    padding: 6px 10px;
    border-radius: 4px;
    min-width: 80px;
    text-align: center;
}

.shift-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    font-size: 16px;
}

.shift-info div {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 4px;
}

.info-label {
    color: #ddd;
}

.info-value {
    color: #fff;
    font-weight: 500;
}

.evaluation-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.evaluation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dot.green {
    background-color: #00ff00;
}

.status-dot.blue {
    background-color: #00a0e9;
}

.status-dot.red {
    background-color: #ff0000;
}

.status-dot.yellow {
    background-color: #ffff00;
}

.plan-table {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 40px);
}

.scroll-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

:deep(.el-table) {
    background-color: transparent !important;
    color: white !important;
}

:deep(.el-table__inner-wrapper::before) {
    display: none;
}

:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
    background-color: transparent !important;
    border-color: #00a0e9 !important;
    color: white !important;
    padding: 8px 0;
    transition: all 0.3s ease;
}

:deep(.el-table thead th) {
    background-color: rgba(0, 160, 233, 0.15) !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 0;
}

:deep(.el-table tbody tr:hover > td) {
    background-color: rgba(0, 160, 233, 0.1) !important;
}

:deep(.el-table--border) {
    border-color: #00a0e9 !important;
}

/* 状态标签样式 */
.status-tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.status-created {
    background: rgba(0, 160, 233, 0.15);
    color: #00a0e9;
    border: 1px solid rgba(0, 160, 233, 0.3);
}

.status-inprogress {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-finished {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.radar-chart-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quality-tag {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.quality-good {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.quality-bad {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.products-table {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 40px);
}

/* 添加表格行进入和离开的动画 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:deep(.el-table tr) {
    animation: fadeInDown 0.3s ease-out forwards;
}
</style>
